<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script>

// <a href="#" title="<?php echo $value['state'] ;?>" onclick="var varadd = jQuery(this).attr('title') ;console.log('varadd' , varadd) ;clickchangevalue('<?php echo $value['state'] ;?>');" title = "<?php echo $value['state'] ;?>">

//search state 
function mk_state_search(address){

	aI=document.getElementById("searchForm").addressInput; 
	radius=document.getElementById("searchForm").radiusSelect;
	aI.value=address;
	radius.value=200;
	var data = {
		action:	'mk_ajax_search_twon',
		state:address,
	};

	$.post('wp-admin/admin-ajax.php', data, function(response) {
		jQuery( '#search-city-anchor').html('Select A Town');
		jQuery( '#city').html( response );
	});
	cslmap.searchLocations();
}

function mksearchtwon(twon){

	aI=document.getElementById("searchForm").addressInput; 
	radius=document.getElementById("searchForm").radiusSelect;
	aI.value=twon;
	radius.value=50;
	cslmap.searchLocations();

}


//blind state search function
jQuery(document).on('click', '.state_search', function(event){
    console.log('thisvalue',$(this).attr('title'));
	mk_state_search($(this).attr('title'));
});

jQuery(document).on('click', '.mk_search_twon', function(event){
    console.log('thisvalue',$(this).attr('title'));
	mksearchtwon($(this).attr('title'));
});
</script>


<?php
  global $search_label, $width, $height, $width_units, $height_units, $hide,
      $sl_radius, $sl_radius_label, $r_options, $button_style,
      $sl_instruction_message, $cs_options, $slplus_state_options, $country_options, 
      $fnvars, $slplus_plugin, $slplus_name_label;

      $prefix = $slplus_plugin->prefix;
	  
      // todo: change the name of this function please!
      SLPlus_Actions::shutdown();
	  
	  //get state
	  $mk_state_arr = mk_store_get_state();
?>

<style>
#search_table ,#map_sidebar{
  display:none;
}

#content #storelocator {
background-color: #333;
margin: 10px 0;
padding: 0px;
width: 690px;
overflow:visible;
border:0px;
}

#content #storelocator fieldset {
display: block;
-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;
border: 2px groove threedface;
border-image: initial;
}

#content #storelocator  div .selectStyleWrapper{
overflow: visible;
}

#content #storelocator  div .selectStyleWrapper{
width: 260px;
border: 2px solid #F3F3F3;
background: #DADADA url(http://www.yuyanli.tk/wp-content/uploads/2012/07/SELECTred-down-arrow.gif) 245px 10px no-repeat;
margin: 15px 0px 15px 20px;
height: 22px !important;
padding: 0;
float: left;
position: relative;
}

#content #storelocator  ul{
position: relative;
padding: 3px 5px;
background: transparent;
width: 260px;
border: none;
color: #86091D;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
margin: 0;
z-index: 1001;
}

#content #storelocator  ul li {
width: 260px;
list-style-type: none;
margin: 0;
position: relative;
font-size: 12px;
z-index: 1002;
}

#content #storelocator  ul a{
color: #86091D;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
text-decoration:none;
}

#content #storelocator  ul li ul {
position: relative;
top: -25px;
left: -6px;
padding: 0;
background-color: #DADADA;
border: 2px solid #F3F3F3;
z-index: 1003;
}

/****bottom********/

#storedetails h4 {
    font-size: 26px;
    margin-top: 0;
    text-transform: uppercase;
}

#storedetails #storehours {
    float: right;
    height: 230px;
    width: 270px;
}

#storedetails div {
    float: left;
    min-height: 280px;
    width: 200px;
}

#storedetails div {
    float: left;
    min-height: 280px;
    width: 200px;
}

#storedetails div {
    float: left;
    min-height: 280px;
    width: 200px;
}

.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
#storedetails div.clearfix {
    min-height: 0;
}
#storedetails div {
    float: left;
    min-height: 280px;
    width: 200px;
}
.clearfix {
    clear: both;
    height: 0 !important;
    overflow: hidden;
}

#storedetails #storehours .header {
    background-color: #DADADA;
    color: #000000;
    display: inline-block;
    font-weight: bold;
    margin: 0;
    padding: 10px;
    width: 250px;
}

#storedetails #storehours .section li {
    border-bottom: 2px dotted #CCCCCC;
    font-size: 12px;
    list-style-type: none;
    margin: 0;
    padding: 7px 0;
    position: relative;
    width: 100%;
}

#storedetails p {
    font-size: 11px;
    margin: 0;
    padding: 0;
}

#storedetails abbr {
    border: medium none;
    color: #A71930;
    font-weight: bold;
    text-decoration: none;
}

#storedetails #storehours .section {
    background-color: #F3F3F3;
    display: inline-block;
    margin: 0;
    width: 270px;
}


#storedetails {
margin: 10px 15px 10px 13px;
width: 680px;
height: 450px;
}
/****bottom********/
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <fieldset id="storelocator">
                <div>
                	<div class="selectStyleWrapper">
                        <ul id="searchbar-county" name="searchbar-county" >
							<li><a href="#" title="County" onclick="jQuery('#county').toggle();return false;" id="search-county-anchor">Select a County</a>
                            
								<ul id="county" style="display:none">
									<li><a href="#" title="select a county" onclick="return false;">Select a County</a></li>
									<?php foreach($mk_state_arr as $value):?>
										<li class = "state_search" title = '<?php echo $value['state'] ;?>'><?php echo $value['state'] ;?></li>
									<?php endforeach ;?>
								</ul>
							</li>
						</ul>
                    </div>
                    
                    <div class="selectStyleWrapper">
                        <ul id="searchbar-city" name="searchbar-city">
							<li><a href="#" title="Town" onclick="jQuery('#city').toggle();return false;" id="search-city-anchor">Select a Town</a>
								<ul id="city" style="display:none;">
									<li><a href="#" title="">Please Select a County First</a></li>
								</ul>
							</li>
						</ul>
                    </div>
                    
           <script type="text/javascript">
                    jQuery("#searchbar-county").hover(
					  function () {
						console.log('over','over');
						jQuery("#county").show();
						jQuery("#countyiframe").show();
						
					  }, 
					  function () {
						jQuery("#county").hide();
						jQuery("#countyiframe").hide();
					  }
					);
					
					jQuery("#searchbar-city").hover(
					  function () {
						jQuery("#city").show();
						
					  }, 
					  function () {
						jQuery("#city").hide();
					  }
					);
					</script> 
                    </div>        
                
                <!-- button type="submit" id="btnStoreLocator" class="buttonSearchForm"><i>Search</i></button -->
            </fieldset> 
 



<div id='sl_div'>
  <form onsubmit='cslmap.searchLocations(); return false;' id='searchForm' action=''>
    <table  id='search_table' border='0' cellpadding='3px' class='sl_header'><tr>
	<td valign='top'>
		 
	    <div id='address_search'>

              
            <?php
            //------------------------------------------------
            // Show City Pulldown Is Enabled
            //
            if ($cs_options != '') { 
            ?>
            <div id='addy_in_city'>
                <select id='addressInput2' onchange='aI=document.getElementById("searchForm").addressInput;if(this.value!=""){oldvalue=aI.value;aI.value=this.value;}else{aI.value=oldvalue;}'>
                    <option value=''>--Search By City--</option>
                    <?php echo $cs_options?>
                </select>
            </div>
            <?php } ?>
            
            
            <?php
            //------------------------------------------------
            // Show State Pulldown Is Enabled
            //
            if ($slplus_state_options != '') { 
            ?>
            <div id='addy_in_state'>
                <label for='addressInputState'><?php 
                	print get_option($prefix.'_state_pd_label');                
                	?></label>
                <select id='addressInputState' onchange='aI=document.getElementById("searchForm").addressInput;if(this.value!=""){oldvalue=aI.value;aI.value=this.value;}else{aI.value=oldvalue;}'>
                    <option value=''>--Search By State--</option>
                    <?php echo $slplus_state_options?>
                </select>
            </div>
            <?php } ?>            
            
            <?php
            //------------------------------------------------
            // Show Country Pulldown Is Enabled
            //
            if ($country_options != '') { 
            ?>
            <div id='addy_in_country'>
                <select id='addressInput3' onchange='aI=document.getElementById("searchForm").addressInput;if(this.value!=""){oldvalue=aI.value;aI.value=this.value;}else{aI.value=oldvalue;}'>
                <option value=''>--Search By Country--</option>
                <?php echo $country_options?>
                </select>
            </div>
            <?php } 

            //------------------------------------------------
            // Show Tag Search Is Enabled
            //
            if ($slplus_plugin->license->packages['Pro Pack']->isenabled) {
                if (get_option(SLPLUS_PREFIX.'_show_tag_search') ==1) {
            ?>
					<div id='search_by_tag' class='search_item' <?php if (isset($fnvars['only_with_tag'])) { print "style='display:none;'"; }?>>   
						<label for='tag_to_search_for'><?php 
							print get_option($prefix.'_search_tag_label');                
							?></label>
						<?php       
							// Tag selections
							//
							if (isset($fnvars['tags_for_pulldown'])) {
								$tag_selections = $fnvars['tags_for_pulldown'];
							}
							else {
								$tag_selections = get_option($prefix.'_tag_search_selections');
							}
                    
							// Tag selections
							//
							if (isset($fnvars['only_with_tag'])) {
								$tag_selections = '';
							}
                    
							// No pre-selected tags, use input box
							//
							if ($tag_selections == '') {
								print "<input type='". (isset($fnvars['only_with_tag']) ? 'hidden' : 'text') . "' ". 
										"id='tag_to_search_for' size='50' " .
										"value='" . (isset($fnvars['only_with_tag']) ? $fnvars['only_with_tag'] : '') . "' ".                                
										"/>";
                        
							// Pulldown for pre-selected list
							//
							} 
							else {
								print "<select id='tag_to_search_for' >";
                        
								// Show Any Option (blank value)
								//
								if (get_option($prefix.'_show_tag_any')==1) {
									print "<option value=''>".
                                        __('Any',SLPLUS_PREFIX).
                                        '</option>';
								}
                        
								$tag_selections = explode(",", $tag_selections);
								foreach ($tag_selections as $selection) {
									$clean_selection = preg_replace('/\((.*)\)/','$1',$selection);
									print "<option value='$clean_selection' ";
									print (ereg("\(.*\)", $selection))? " selected='selected' " : '';
									print ">$clean_selection</option>";                            
								}
								print "</select>";
							}
						?>
						</div>
				<?php
				}
	        
				// ----------------------------------------------
				// We are showing the name search
				//
				if (get_option(SLPLUS_PREFIX.'_show_search_by_name') == 1) {
					?>
					<div id='name_search_div' class='search_item'>
						<label for='nameSearch'><?php echo $slplus_name_label?></label>
						<input type='text' id='nameSearch' size='50' />
					</div>
					<?php
				}
			}
			?>
			
            <?php
            //------------------------------------------------
            // We are not hiding the address input
            //
            if (get_option(SLPLUS_PREFIX.'_hide_address_entry') == 0) {                
            ?>    	   
            <div id='addy_in_address' class='search_item'>
                <label for="addressInput"><?php echo $search_label?></label>
                <input type='text' id='addressInput' size='50' />
           </div>
           <?php
            } else {
                ?>
            <div id='addy_in_address' class='search_item'>
            <input type='hidden' id='addressInput' value='' />
           </div>
           <?php
            }
            ?>

            <?php
            //------------------------------------------------
            // We are not hiding the radius selection
            //
            if (get_option(SLPLUS_PREFIX.'_hide_radius_selections') == 0) {                
            ?>           
                <div id='addy_in_radius'>
                    <label for='radiusSelect'><?php _e($sl_radius_label, SLPLUS_PREFIX);?></label>
                    <select id='radiusSelect'><?php echo $r_options;?></select>
                </div>
                
            <?php
            } else {
                echo $r_options;
            }
            
            //------------------------------------------------
            // We are not hiding the submit button
            //
            if (get_option(SLPLUS_PREFIX.'_disable_search') == 0) {                
            ?>               
            <div id='radius_in_submit'>
                <input <?php echo $button_style?> value='Search Locations' id='addressSubmit'/>
            </div>
            <?php
            }
            ?>
            
            
        </div>
	  </td>
	</tr></table>
	<table id='map_table' width='100%' cellspacing='0px' cellpadding='0px'> 
     <tr>
        <td width='100%' valign='top'>
<?php
$sl_starting_image=get_option('sl_starting_image');
if ($sl_starting_image != '') {    
?>
            <div id='map_box_image' style='width:<?php echo $width?><?php echo $width_units?>; height:<?php echo $height?><?php echo $height_units?>'>      
                <img src='<?php 
                        if (preg_match('/^http/',$sl_starting_image) <= 0) {
                            echo SLPLUS_PLUGINURL;
                        }
                        echo $sl_starting_image;                        
                    ?>'>
            </div>
            <div id='map_box_map'>
<?php
}
?>
                <div id='map' style='width:<?php echo $width?><?php echo $width_units?>; height:<?php echo $height?><?php echo $height_units?>'></div>
                <table cellpadding='0px' class='sl_footer' width='<?php echo $width?><?php echo $width_units?>;' <?php echo $hide?>>
                <tr>
                    <td class='sl_footer_left_column'>
                        <a href='http://www.cybersprocket.com/products/store-locator-plus/' target='_blank'>Store Locator Plus</a>
                    </td>
                    <td class='sl_footer_right_column'>
                        <a href='http://www.cybersprocket.com' target='_blank' title='by Cyber Sprocket Labs'>by Cyber Sprocket Labs</a>
                    </td>
                </tr>                
                </table>
<?php
if ($sl_starting_image != '') {    
?>
            </div>
<?php
}
?>
		</td>
      </tr>
	  <tr id='cm_mapTR'>
        <td width='' valign='top' id='map_sidebar_td'>
            <div id='map_sidebar' style='width:<?php echo $width?><?php echo $width_units?>;'>
                <div class='text_below_map'><?php echo $sl_instruction_message?></div>
            </div>
        </td>
    </tr>
  </table></form>
</div>


<!-- bottom -->
<div id = "mk_map_bottom">

</div>
<!-- end bottom -->

<?php
function mk_store_get_state(){
global $wpdb;
$cs_array=$wpdb->get_results(
                "SELECT TRIM(sl_state) as state " .
                    "FROM ".$wpdb->prefix."store_locator " .
                    "WHERE sl_state<>'' " .
                        "AND sl_latitude<>'' AND sl_longitude<>'' " .
                    "GROUP BY state " .
                    "ORDER BY state ASC", 
                ARRAY_A);
return $cs_array;
}



?>
